<template>
  <div class="left-container">
    <KnHeader></KnHeader>
    <div class="content-wrapper">
      <!-- 树视图 -->
      <div class="tree-view-wrapper">
        <el-tree
          :data="categories"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
        ></el-tree>
      </div>

      <!-- 卡片视图 -->
      <div class="card-view-container">
        <el-card
          v-for="(ebook, index) in ebooks"
          :key="ebook.id"
          class="card-view"
          :body-style="{ padding: '0px' }"
          
        >
          <img :src="ebook.cover" class="image">
          <div style="padding: 14px;" @click="goEbook(ebook)">
            <span>{{ ebook.name }}</span>
            <p class="description">{{ ebook.description }}</p>
            <div class="bottom clearfix">
              <div class="stats">
                <span class="likes">点赞数: {{ ebook.voteCount }}</span>
                <span class="reads">阅读数: {{ ebook.viewCount }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {getCategories} from "@/apis/categoryApi";
import {getEbooks} from "@/apis/ebooks";
import KnHeader from "@/components/KnHeader.vue";

export default {
    name: "NavigationBarVue",
    //import引入组件才能使用
    components: {
      KnHeader
    },
    props: {},
    data() {
        return {
            currentDate: new Date(),
      categories: [],
      ebooks:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      expandedKeys:[]
        };
    },
    // 计算属性
    computed: {},
    // 方法集合
    methods: {
      goEbook(row){
        console.log(row);
        this.$router.push('/docVue/'+row.id)
      },
        async getCategory(){
       let records =  await getCategories()
      console.log(records)
      this.categories = records.data.data
    },
   async handleNodeClick(data,node) {
     console.log('node===>',node.level)
     if(node.level!==1){
       let ebooks = await getEbooks(data.id)
       this.ebooks = ebooks.data.data
       console.log(ebooks)
     }

    },
    },
    created() {
    this.getCategory()

  },
}
</script>

<style scoped>
.left-container {
  border: 1px solid #eee;
  border-radius: 8px; /* 添加圆角 */
  overflow: hidden; /* 隐藏溢出部分 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  background-color: #fff; /* 设置背景色 */
  padding: 20px;
  min-height: 100vh;
}

.content-wrapper {
  display: flex;
  gap: 20px; /* 树视图与卡片视图之间的间距 */
}

.tree-view-wrapper {
  width: 220px;
  flex-shrink: 0;
  background-color: #f9fafc; /* 设置树视图的背景色 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 树视图样式优化 */
.el-tree {
  font-size: 14px;
  color: #333;
}

.el-tree-node__content {
  padding: 8px 12px;
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: #f0f7ff;
  border-radius: 4px;
}

.card-view-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距 */
}

.card-view {
  flex: 1 1 calc(25% - 20px);
  padding: 0; /* 移除内边距，使用内部元素的内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden; /* 防止内容溢出圆角 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.card-view:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.image {
  width: 100%;
  height: 200px; /* 固定图片高度 */
  object-fit: cover; /* 保持图片比例并填充容器 */
  display: block;
  border-radius: 8px 8px 0 0; /* 圆角仅应用于顶部 */
}

.image-fixed { /* 如果需要固定宽高，可以使用这个类 */
  width: 150px; /* 固定宽度 */
  height: 200px; /* 固定高度 */
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

.description {
  font-size: 16px;
  color: #333;
  margin: 10px 15px; /* 增加左右边距 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bottom {
  margin: 15px 15px 0; /* 增加左右边距 */
  line-height: 1.5;
}

.stats {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.stats span {
  margin-right: 15px;
  display: inline-block;
}

.stats .likes,
.stats .reads {
  margin-right: 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .card-view {
    flex: 1 1 calc(33.333% - 20px);
  }
}

@media (max-width: 992px) {
  .card-view {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .tree-view-wrapper {
    display: none;
  }

  .card-view {
    flex: 1 1 100%;
    height: auto; /* 确保卡片高度自适应 */
  }

  .image {
    height: auto; /* 在小屏幕上允许图片高度自适应 */
    aspect-ratio: 3 / 4; /* 设置宽高比以保持比例 */
  }
}

/* 卡片内的按钮区域（如果需要添加按钮，可以取消下面的注释并自定义） */
/*
.button {
  padding: 8px 12px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #66b1ff;
}
*/

/* 加载状态样式（可选） */
.ebooks-loading {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #999;
}

/* 错误消息样式（可选） */
.ebooks-error {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #ff4d4f;
}

/* 导航栏样式优化（假设 KnHeader 是自定义组件，可以自定义其样式） */
.kn-header {
  background-color: #409EFF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
}

.kn-header .logo {
  font-size: 18px;
  font-weight: bold;
}

.kn-header .user-info {
  margin-left: auto;
}

.kn-header .user-info span {
  margin-right: 15px;
  color: #fff;
}

.kn-header .user-info span:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>